<!--<template>
  <div>
    <div id="app" class="main">
      <div class="top">
        <div>
          用户名:
          <input type="text" v-model="author" />
          <p></p>
          <label>
            <span>评论内容:</span>
            <textarea v-model="content"></textarea>
          </label>
          <p>
            <button @click="saveData">发布</button>
          </p>
        </div>
      </div>

      <div class="content">
        <div v-for="data in datas">
          <div>
            {{data.key}}：{{data.value}}
            <a href @click.prevent="del(data.id)">删除此评论</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--<script>
export default {
  data() {
    return {
      datas: [],
      author: "",
      content: "",
    };
  },
  methods: {
    saveData() {
      //将用户名存储到localstorage中
      localStorage.setItem("input_author", this.author);

      if (this.author.trim() === "") {
        return alert("小兄弟，请先输入用户名啊！！！！");
      }

      if (this.content.trim() === "") {
        return alert("大兄弟,你输入一下内容呗!!!!!");
      }
      //将用户名和对应的内容push到数组中
      this.datas.push({
        id: +new Date(),
        key: this.author,
        value: this.content,
      });
      //更新
      this.updateData();
    },
    updateData() {
      //将数组序列化成字符串存入localstorage中
      localStorage.setItem("author_content", JSON.stringify(this.datas));
    },
    del(id) {
      //根据id过滤datas中的数组
      this.datas = this.datas.filter((c) => c.id != id); //简写

      //                         this.datas= this.datas.filter(function(c){
      //                             return c.id != id;
      //                         })

      //更新数据
      this.updateData();
    },
  },
  created() {
    //取到上一次的用户名
    var author = localStorage.getItem("input_author");
    if (author) {
      this.author = author;
    }
    //取出localstorage中的评论数据
    var content = localStorage.getItem("author_content");
    if (content) {
      //将存在localstorage中的数据取出,并序列化储成对象存入数组中
      this.datas = JSON.parse(content);
    }
  },
  mounted() {},
};
</script>

<!-- <style scoped>
.main {
  border: 3px solid antiquewhite;
  width: 500px;
  height: 600px;
  margin: auto;
}

.top {
  border: 2px solid aquamarine;
  width: 450px;
  height: 200px;
  margin: auto;
  margin-top: 10px;
  text-align: center;
}

.content {
  border: 4px solid aliceblue;
  width: 450px;
  height: 350px;
  margin: auto;
  margin-top: 20px;
}

.top input {
  margin-top: 10px;
  height: 25px;
  width: 60%;
  margin-left: 20px;
}

.top label {
  display: flex;
  margin-left: 35px;
  height: 100px;
}

.top label > textarea {
  margin-left: 20px;
  width: 270px;
}

.top button {
  margin-left: 270px;
  background: #7fffd4;
  width: 65px;
}

.content > div div {
  border: 3px solid #f0f8ff;
  height: 30px;
  margin-top: 4px;
  padding-top: 10px;
}

.content > div > div a {
  float: right;
}
</style> -->
<template>
<div>
haha
</div>
</template>

<script>
export default {
 data () {
return {
}
 },
 mounted () {
}
}
</script>

<style scoped>

</style>


